<template>
	<view>
		<!-- 病历服务 -->
		<view class="between-center pad-16r">
			<view v-for="(item,index) in listStep" :key="index">
				<view class="text-center" @click="changeStep(item)">
					<view class="center">
						<view class="step-step" :class="item.active?'active-step':''">{{item.step}}</view>
					</view>
					<view class="step-name" :class="item.active?'active-name':''">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="pad-16r">
			<view v-if="step==1">
				<BasicInfoVue @updateStep="changeStep" :form="form"></BasicInfoVue>
			</view>
			<view v-if="step==2">
				<ContentInfoVue @updateStep="changeStep" :form="form"></ContentInfoVue>
			</view>
			<view v-if="step==3">
				<ConfirmInfoVue @updateStep="changeStep" :form="form"></ConfirmInfoVue>
			</view>
			<view v-if="step==4">
				<MethodInfoVue @updateStep="changeStep" :form="form"></MethodInfoVue>
			</view>
		</view>
	</view>
</template>

<script>
	import BasicInfoVue from './copyStep/BasicInfo.vue'
	import ContentInfoVue from './copyStep/ContentInfo.vue'
	import ConfirmInfoVue from './copyStep/ConfirmInfo.vue'
	import MethodInfoVue from './copyStep/MethodInfo.vue'
	export default {
		components: {
			BasicInfoVue,
			ContentInfoVue,
			ConfirmInfoVue,
			MethodInfoVue,
		},
		data() {
			return {
				listStep: [{
						step: 1,
						name: '基本信息',
						active: true,
					},
					{
						step: 2,
						name: '申请内容',
						active: false,
					},
					{
						step: 3,
						name: '申请人确认',
						active: false,
					},
					{
						step: 4,
						name: '领取方式',
						active: false,
					},
				],
				step: 1, //默认第一步
				form: {
					type: 1, //本人还是代理人
					patName: '',
					patCertId: '',
					patPhone: '',
					code: '',
					inHospitalNo: '',
					inHospitalTime: '',
					outHospitalTime: '',
					relationName: '',
					relationCertId: '',
					relationPhone: '',
					copyType: 'pdf',
					copyNum: 1,
					describe: '',
					listCopy: [{
						type: 1,
						name: "病历首页",
						active: true,
					}, {
						type: 2,
						name: "入院记录",
						active: true,
					}, {
						type: 3,
						name: "出院记录",
						active: true,
					}],
					getMethod: 'ems',
					region: [],
					cash: 100,
					emsMoney: 15,

				},
			}
		},
		mounted() {

		},
		methods: {
			changeStep(item) {
				this.listStep.forEach(res => {
					if (res.step <= item.step) {
						res.active = true
					} else {
						res.active = false
					}

				})
				this.step = item.step
			}
		}
	}
</script>

<style scoped>
	.step-step {
		width: 30px;
		height: 30px;
		line-height: 30px;
		border-radius: 45px;
		background-color: rgb(180, 192, 212);
	}

	.step-name {
		color: rgb(180, 192, 212);
		line-height: 30px;
	}

	.active-step {
		background-color: rgb(61, 194, 234);
	}

	.active-name {
		color: rgb(61, 194, 234);
	}
</style>